<template>
  <div class="Bar">
    <h1>柱状图</h1>
    <AddressEcharBar class="chart-item" height="100%" width="100%" :chart-option="chartOption" />
  </div>
</template>

<script>
import AddressEcharBar from '@/components/ChartModule/echarBar.vue'
import { chartOptinSet } from '@/mixins/chartOption.js'
export default {
  mixins: [chartOptinSet],
  components: {
    AddressEcharBar
  },
  data () {
    return {
      echatData: [
        {
          count: 4,
          time: '2021-08',
          visited_place: '北京总部'
        },
        {
          count: 22,
          time: "2021-08",
          visited_place: '北京慎昌'
        },
        {
          count: 133,
          time: "2021-08",
          visited_place: '上海研发中心'
        },
        {
          count: 131,
          time: "2021-08",
          visited_place: '西安研发中心'
        },
        {
          count: 60,
          time: "2021-08",
          visited_place: '湖州制造基地'
        },
        {
          count: 144,
          time: "2021-08",
          visited_place: '嘉兴制造基地'
        },
        {
          count: 100,
          time: "2021-09",
          visited_place: '北京慎昌'
        },
        {
          count: 10,
          time: "2021-09",
          visited_place: '湖州制造基地'
        },
        {
          count: 10,
          time: "2021-09",
          visited_place: '上海研发中心'
        },
        {
          count: 10,
          time: "2021-09",
          visited_place: '北京总部'
        },
        {
          count: 10,
          time: "2021-09",
          visited_place: '嘉兴制造基地'
        },
      ],
      aa:[]
    }
  },
  created () {
    this.getEchartData();
    this.Iterator();
  },
  methods: {
    Iterator () {
      const Months = this.getMonthAll("2021-08", "2021-10")
      const bb = []
      Months.map(item => {
        this.chartOption.legend.data.forEach(key => {
          bb.push({
            time: item,
            count: 0,
            visited_place: key
          })
        })
      })
      // const cc = [...bb, ...this.echatData]
      bb.forEach(item =>{
        this.echatData.forEach(key =>{
          if(item.time === key.time && item.visited_place === key.visited_place){
             item.count = key.count
          }
        })
      })
      this.echatData = bb
        console.log('000', bb)
   
    },
    getEchartData () {

      const { xAxis, legend } = this.chartOption
      const [datas] = xAxis
      datas.data = [...new Set(this.echatData.map(item => (item.time)))]
      legend.data = [...new Set(this.echatData.map(item => (item.visited_place)))]
      // this.chartOption.series= this.echatData.map(({ visited_place, count}) =>({ name:visited_place, type:'bar', data:[count]}));

      const visitedMap = new Map();
      this.echatData.forEach((item) => {
        if (!visitedMap.has(item.visited_place)) {
          visitedMap.set(item.visited_place, []);
        }

        visitedMap.get(item.visited_place).push(item);
      });

      this.chartOption.series = Array.from(visitedMap).map(([name, value]) => {
        const data = value.map(({ count }) => count);
        return { name, data, type: 'bar', barWidth: 20, };
      });

      //console.log('---', this.chartOption.series)

    },
    getMonthAll (begin, end) {
      var d1 = begin;
      var d2 = end;
      var dateArry = new Array();
      var s1 = d1.split("-");
      var s2 = d2.split("-");
      var mCount = 0;
      if (parseInt(s1[0]) < parseInt(s2[0])) {
        mCount = (parseInt(s2[0]) - parseInt(s1[0])) * 12 + parseInt(s2[1]) - parseInt(s1[1]) + 1;
      } else {
        mCount = parseInt(s2[1]) - parseInt(s1[1]) + 1;
      }
      if (mCount > 0) {
        var startM = parseInt(s1[1]);
        var startY = parseInt(s1[0]);
        for (var i = 0; i < mCount; i++) {
          if (startM < 12) {
            dateArry[i] = startY + "-" + (startM > 9 ? startM : "0" + startM);
            startM += 1;
          } else {
            dateArry[i] = startY + "-" + (startM > 9 ? startM : "0" + startM);
            startM = 1;
            startY += 1;
          }
        }
      }
      return dateArry;
    }
  }

}
</script>

<style scoped>
.Bar {
  height: 300px;
  position: relative;
}
</style>